<template>
  <hr>
<!--  <button @click="showMsg">按钮</button>-->
  <h3 v-if="loading">正在加载中</h3>
  <h3 v-else-if="errorMsg">错误信息:{{errorMsg}}</h3>
  <div class="row">
    <div class="col-md-8">
      <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <template  v-for="(item,index) in data" v-bind:key="item.videoid">
            <div class="carousel-item active" v-if="index ===0">
              <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<!--              <img v-bind:src="prefix2+'p'+item.cover_pic+'.jpg'">-->
              <img v-bind:src="request.pic(item.cover_pic)" @click="playVideo(item.videoid,true)">
              <div class="container">
                <div class="carousel-caption text-start">
                  <h1>{{ item.title }}</h1>
                  <p>{{item.info}}</p>
                  <p>{{item.cover_pic}}</p>
                </div>
              </div>
            </div>

            <div class="carousel-item" v-if="index===1">
              <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

              <img v-bind:src="request.pic(item.cover_pic)" @click="playVideo(item.videoid,true)">
              <div class="container">
                <div class="carousel-caption">
                  <h1>{{ item.title }}</h1>
                  <p>{{item.info}}</p>
                </div>
              </div>
            </div>
            <div class="carousel-item" v-if="index===2">
              <img v-bind:src="request.pic(item.cover_pic)" @click="playVideo(item.videoid,true)">
              <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

              <div class="container">
                <div class="carousel-caption text-end">
                  <h1>{{ item.title }}</h1>
                  <p>{{item.info}}</p>
                </div>
              </div>
            </div>
          </template>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <div class="col-md-4" >
      <h1>总排行榜</h1>
      <div v-for="(item,index) in data" v-bind:key="item.videoid">
        <p @click="playVideo(item.videoid,true)">{{index+1}}: {{item.title}}</p>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import {inject, ref} from "vue";
import useGetRequest from "@/hooks/useGetRequest";
import {VideoData} from "@/types/AllData";
import request from "@/hooks/request";

// 轮播图展示的内容
// 向后端发送请求,获取排行榜前10,前3个用于轮播图展示,合起来一直展示在右边榜单伤
const prefix:string|undefined = inject('prefix')
const prefix2:string|undefined = inject('prefix2')
const playVideo=inject('playVideo')
console.log(prefix2)
const {loading,data,errorMsg} = useGetRequest<VideoData[]>(prefix+"video/search?ordered=1&pageCapacity=10&pageIndex=1")

</script>

<style scoped>
body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}

.carousel {
  margin-bottom: 4rem;
}

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}
</style>